<!-- 首页 列表组件封装-->
<template>
	<!-- 列表样式 -->
	<view class="p-2 animate__animated animate__fadeIn">
		<!-- 头像昵称 ｜ 关注按钮 -->
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<!-- 头像 lazy-load 图片懒加载-->
				<image
					@click="openSpace(item.user_id)"
					class="rounded-circle mr-2"
					:src="item.userpic?item.userpic:'/static/default.jpg'"
					style="width: 65rpx; height: 65rpx"
					@error="imageError"
					lazy-load
				></image>
				<!-- 昵称 | 发布时间 -->
				<view>
					<view class="font" style="line-height: 1.5"> {{ item.username }} </view>
					<text class="font-sm text-light-muted" style="line-height: 1.5">
						{{ item.newstime | formatTime }}
					</text>
				</view>
			</view>
			<!-- 关注 按钮 -->
			<!-- !item.isFollow 为false 呈现未关注的效果 -->
			<view
				@click="follow"
				v-if="user.id!==item.user_id"
				class="flex align-center justify-center rounded animate__animated animate__fast"
				:class="item.isFollow ? 'border border-secondary text-hover-secondary font-sm' : 'bg-main text-white'"
				style="width: 90rpx;height: 50rpx;"
				hover-class="animate__jello"
			>
				{{ item.isFollow ? '已关注' : '关注' }}
			</view>
			<view v-else
			class="flex align-center justify-center rounded border border-secondary text-hover-secondary font-sm animate__animated animate__fast"
			style="width: 110rpx;height: 50rpx;"
			hover-class="animate__jello" @click="openSpace(item.user_id)">
			   	进入空间
			</view>
		</view>
		<!-- 标题 -->
		<view class="font-md my-1" @click="openDetail"> #{{ item.title }}# </view>
		<!-- 图片 -->
		<!-- v-if判断图片存在，在显示 -->
		<!-- 帖子详情页 渲染 -->
		<slot>
			<image
				v-if="item.titlepic"
				:src="item.titlepic?item.titlepic:'/static/bgimg/banner2.jpg'"
				@click="openDetail"
				style="height: 350rpx;"
				class="rounded w-100"
				mode="aspectFill"
				@error="imageTitPicErr"
				lazy-load
			/>
		</slot>
		<!-- 图标按钮 -->
		<view class="flex align-center">
			<!-- 点赞 -->
			<view
				class="flex align-center justify-center flex-1 animate__animated animate__fast"
				hover-class="animate__jello text-main"
				:class="item.support.type === 'support' ? 'support_active' : ''"
				@click="doSupport('support')"
			>
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{ item.support.support_count > 0 ? item.support.support_count : '支持' }}</text>
			</view>
			<!-- 踩 -->
			<view
				class="flex align-center justify-center flex-1 animate__animated animate__fast"
				hover-class="animate__jello text-main"
				:class="item.support.type === 'unsupport' ? 'support_active' : ''"
				@click="doSupport('unsupport')"
			>
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{ item.support.unsupport_count > 0 ? item.support.unsupport_count : '反对' }}</text>
			</view>
			<!-- 评论 -->
			<view
				class="flex align-center justify-center flex-1 animate__animated animate__fast"
				hover-class="animate__jello text-main"
				@click="doComment"
			>
				<text class="iconfont icon-pinglun2 mr-2"></text>
				<text>{{ item.comment_count > 0 ? item.comment_count : '评论' }}</text>
			</view>
			<!-- 分享 -->
			<view
				class="flex align-center justify-center flex-1 animate__animated animate__fast"
				hover-class="animate__jello text-main"
				@click="doShare"
			>
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{ item.share_num > 0 ? item.share_num : '分享' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入过滤 事件 的 js文件
	import $T from '@/common/time.js';
	// 引入vuex
	import {mapState} from 'vuex'
	export default {
		// 接收父组件，传入的值
		props: {
			// 数据获取 item
			item: Object,
			// 循环数据的下标
			index: {
				type: Number,
				default: -1,
			},
			// 判断是否处于 详情页
			isdetail: {
				type: Boolean,
				default: false,
			},
		},
		// filter 过滤器 ，过滤 时间戳
		filters: {
			formatTime(value) {
				// 使用 人性化 格式化时间事件，转化事件戳
				return $T.gettime(value);
			},
		},
		computed:{
		  // 结构赋值
		  ...mapState({
		  	// 从vuex中，获取到用户信息
		  	user:state=>state.user
		  }),
		},
		// 存放 所有事件
		methods: {
			imageError(){
				this.item.userpic='/static/default.jpg'
			   // console.log('图片加载失败',this.item);
			},
			imageTitPicErr(){
				this.item.titlepic='/static/bgimg/banner2.jpg'
				console.log('图片加载失败',this.item);
			},
			// 打开个人空间
			openSpace(user_id) {
				uni.navigateTo({
					// 跳转到个人空间
					url: '/pages/user-space/user-space?user_id=' + user_id,
				});
			},
			/*
			    子组件，无法修改props里面的数据，要发布一个自定义事件
			  用户点击关注，会触发follow事件，通知父组件
			  当前点击的 用户id，通知父组件 点击的哪位用户 id值 
			  this.$emit('follow', 用户id);
			  可以认为$emit 就是父组件成功触发, 那也可以在这里请求接口
			 */
			// 关注此用户
			follow() {
				// 最后加的（权限验证，验证 登录状态）
				this.checkAuth(() => {
					let url = this.item.isFollow ? '/unfollow' : '/follow';
					this.$H
						.post(
							url,
							{
								follow_id: this.item.user_id, //用户id
							},
							{
								token: true,
								native: true,
							},
						)
						.then((res) => {
							setTimeout(()=>{
								// 通知父组件
								uni.$emit('updateFollSupport', {
									type: 'follow',
									data: {
										user_id: this.item.user_id,
									},
								});
								
							},300)
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 800,
							});
						});
				});
			},
			// 进入详情页
			openDetail() {
				// 判断是否处于详情页
				if (this.isdetail) return;
				uni.navigateTo({
					// 路由传参，跳转详情页
					url: '../../pages/detail/detail?delist=' + JSON.stringify(this.item),
				});
				// 加入 浏览历史记录 中 (参考history页面)
				let list = uni.getStorageSync('history')
				// 如果 list存在，序列化 本地取出的数据，否则为空
				list = list ? JSON.parse(list):[];
				/* 查找此篇文章 是否存在，
				findIndex根据下标查找 这篇文章的id 是否全等于，详情页文章的id */
				let index = list.findIndex(v=>v.id === this.item.id)
				// 如果 下标 为-1 ，说明不存在
				if(index===-1){ 
					// console.log('追加历史记录');
					// console.log(this.item);
					// 将这篇文章 追加到 list历史记录中
					list.unshift(this.item)
					uni.setStorageSync('history',JSON.stringify(list))
				}
			},
			// 点赞 或 踩 根据接收的(type)进行判断
			doSupport(type) {
				this.checkAuth(() => {
					this.$H.post('/support',{
						post_id: this.item.id, // 文章id
						type: type === 'support' ? 0 : 1, // 顶踩 类型
					},{
						token: true,
						native: true, //返回原始数据
					})
					.then((res) => {
						// 如果重复 操作，终止
						if (res.data.errorCode) {
							return uni.showToast({
								title: res.data.msg,
								icon: 'none',
							});
						}
						setTimeout(()=>{
							// 通知父组件,发布事件doSupport
							uni.$emit('updateFollSupport', {
								type: 'support',
								data: {
									type: type,
									id: this.item.id, // 此篇文章的id
								},
							});
						},500)		
					});
				});
			},
			// 评论
			doComment() {
				this.checkAuth(() => {
					// 如果 处于 不是详情页位置
					if (!this.isdetail) {
						this.openDetail();
					}
					// 通知父组件，调用这个事件
					this.$emit('doComment');
				});
			},
			// 分享
			doShare() {
				// 如果 处于 不是详情页位置
				if (!this.isdetail) {
					return this.openDetail();
				}
				// 通知父组件，调用这个事件
				this.$emit('doShare');
			},
		},
	};
</script>

<style lang="scss" scoped>
	// 点赞 或 踩的样式 添加
	.support_active {
		color: #ff4a6a;
	}
</style>
